<template>
  <div class="page_monitor-add">
    <!-- 页面title -->
    <div class="page-title">公路地质灾害隐患排查表单填写</div>
    <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
             label-width="90px" style="box-shadow: 0 0 10px 10px rgb(0 0 0 / 3%);">
      <!-- 具体form表单 -->
      <el-steps :active="stepActive" space="200" simple finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="灾害类型"></el-step>
        <el-step title="影响公路情况"></el-step>
        <el-step title="已采取措施"></el-step>
      </el-steps>

      <div v-show="stepActive === 0" class="box_wrap">
        <form-geology-base v-model="currentRow" ref="formBase" :roadList2="roadList"></form-geology-base>
        <div class="button-foot">
          <el-button size="medium" type="primary" @click="validatorForm('formBase')">下一步</el-button>
        </div>
      </div>
      <div v-show="stepActive === 1" class="box_wrap">
        <div>
          <div class="geology">
            灾害类型
          </div>
          <div class="father-box">
            <el-checkbox-group v-model="currentRow.damageTypeList" @change="changeCollapseItem">
              <el-checkbox v-for="item in EnumDamageTypeList" :key="item.code" :label="item.code">{{item.name}}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <el-card class="box-card item-children" v-if="currentRow.damageTypeList.length > 0">
            <el-tabs v-model="collapseActiveName">
              <el-tab-pane name="1" label="崩塌" v-if="showCollapseTab(1)">
                <form-geology-beng-ta v-model="currentRow" ref="formBengta"></form-geology-beng-ta>
              </el-tab-pane>
              <el-tab-pane name="2" label="滑坡" v-if="showCollapseTab(2)">
                <form-geology-hua-po v-model="currentRow" ref="formHuaPo"></form-geology-hua-po>
              </el-tab-pane>
              <el-tab-pane name="3" label="泥石流" v-if="showCollapseTab(3)">
                <form-geology-ni-shi-liu v-model="currentRow" ref="formNishiLiu"></form-geology-ni-shi-liu>
              </el-tab-pane>
              <el-tab-pane name="4" label="沉陷与塌陷" v-if="showCollapseTab(4)">
                <form-geology-chen-jiang v-model="currentRow" ref="formChenJiang"></form-geology-chen-jiang>
              </el-tab-pane>
              <el-tab-pane name="5" label="水毁" v-if="showCollapseTab(5)">
                <form-geology-shui-hui v-model="currentRow" ref="formShuiHui"></form-geology-shui-hui>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <div class="geology-children">
            其他情况/补充描述
          </div>
          <el-form-item>
            <el-input v-model="currentRow.damage.remark" type="textarea" :rows="4"
                      placeholder="输入其他情况/补充描述"></el-input>
          </el-form-item>
        </div>
        <div class="button-foot">
          <el-button size="medium" type="primary" plain @click="stepActive--">上一步</el-button>
          <el-button size="medium" type="primary" @click="validatorForm()">下一步</el-button>
        </div>
      </div>
      <div v-show="stepActive === 2" class="box_wrap">
        <div class="geology">
          影响公路情况
        </div>
        <div class="father-box">
          <el-checkbox-group v-model="currentRow.roadEffectTypeList" @change="changeRoadEffectItem">
            <el-checkbox v-for="item in EnumRoadEffectTypeList" :key="item.code" :label="item.code">{{item.name}}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <el-card class="box-card item-children" v-if="currentRow.roadEffectTypeList.length > 0">
          <el-tabs v-model="roadEffectActiveName">
            <el-tab-pane name="1" label="填方路基" v-if="showRoadEffectTab(1)">
              <form-geology-road-tf v-model="currentRow" ref="formRoadTf"></form-geology-road-tf>
            </el-tab-pane>
            <el-tab-pane name="2" label="挖方边坡" v-if="showRoadEffectTab(2)">
              <form-geology-road-wf v-model="currentRow" ref="formRoadWf"></form-geology-road-wf>
            </el-tab-pane>
            <el-tab-pane name="3" label="桥梁涵洞" v-if="showRoadEffectTab(3)">
              <form-geology-road-hd v-model="currentRow" ref="formRoadHd"></form-geology-road-hd>
            </el-tab-pane>
            <el-tab-pane name="4" label="隧道" v-if="showRoadEffectTab(4)">
              <form-geology-road-sd v-model="currentRow" ref="formRoadSd"></form-geology-road-sd>
            </el-tab-pane>
            <el-tab-pane name="5" label="排水设施" v-if="showRoadEffectTab(5)">
              <form-geology-road-ps v-model="currentRow" ref="formRoadPs"></form-geology-road-ps>
            </el-tab-pane>
            <el-tab-pane name="6" label="取/弃土场" v-if="showRoadEffectTab(6)">
              <form-geology-road-tc v-model="currentRow" ref="formRoadTc"></form-geology-road-tc>
            </el-tab-pane>
            <el-tab-pane name="7" label="施工便道" v-if="showRoadEffectTab(7)">
              <form-geology-road-bd v-model="currentRow" ref="formRoadBd"></form-geology-road-bd>
            </el-tab-pane>
            <el-tab-pane name="8" label="临时驻地" v-if="showRoadEffectTab(8)">
              <form-geology-road-zd v-model="currentRow" ref="formRoadZd"></form-geology-road-zd>
            </el-tab-pane>
            <el-tab-pane name="9" label="周边建（构）筑物" v-if="showRoadEffectTab(9)">
              <form-geology-road-jz v-model="currentRow" ref="formRoadJz"></form-geology-road-jz>
            </el-tab-pane>
            <el-tab-pane name="10" label="周边住户" v-if="showRoadEffectTab(10)">
              <form-geology-road-zh v-model="currentRow" ref="formRoadZh"></form-geology-road-zh>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <div class="geology-children">
          其他情况/补充描述
        </div>
        <el-form-item prop="evaluate">
          <el-input v-model="currentRow.roadEffect.remark" type="textarea" :rows="4"
                    placeholder="输入其他情况/补充描述"></el-input>
        </el-form-item>
        <div class="button-foot">
          <el-button size="medium" type="primary" plain @click="stepActive--">上一步</el-button>
          <el-button size="medium" type="primary" @click="validatorForm()">下一步</el-button>
        </div>
      </div>
      <div v-show="stepActive === 3" class="box_wrap evaluate">
        <div class="geology">
          已采取管控措施
        </div>
        <div class="father-box">
          <el-checkbox-group v-model="currentRow.measuresTypeList">
            <el-checkbox v-for="item in EnumMeasuresList" :key="item.code" :label="item.code">{{item.name}}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="geology-children">
          其他情况/补充描述
        </div>
        <el-form-item prop="evaluate">
          <el-input v-model="currentRow.measuresRemark" type="textarea" :rows="4"
                    placeholder="输入其他情况/补充描述"></el-input>
        </el-form-item>
        <div class="button-foot">
          <el-button size="medium" type="primary" plain @click="lastStep">上一步</el-button>
          <el-button class="common_btn-defalut" type="primary" @click="validateForm">提交</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {
  addGeologyInvestigation,
  updateGeologyInvestigation
} from '@/services/model/investigation';
import FormGeologyBase from "./modules/form-geology-base";
import FormGeologyBengTa from "./modules/form-geology-bengta";
import FormGeologyHuaPo from "./modules/form-geology-huapo";
import FormGeologyNiShiLiu from "./modules/form-geology-nishiliu";
import FormGeologyChenJiang from "./modules/form-geology-chenjiang";
import FormGeologyRoadTf from "./modules/form-geology-road-tianfang";
import FormGeologyRoadWf from "./modules/form-geology-road-wafang";
import FormGeologyRoadHd from "./modules/form-geology-road-handong";
import FormGeologyRoadSd from "./modules/form-geology-road-suidao";
import FormGeologyRoadPs from "./modules/form-geology-road-paishui";
import FormGeologyRoadTc from "./modules/form-geology-road-tuchang";
import FormGeologyRoadBd from "./modules/form-geology-road-biandao";
import FormGeologyRoadZd from "./modules/form-geology-road-zhudi";
import FormGeologyRoadJz from "./modules/form-geology-road-jianzhu";
import FormGeologyRoadZh from "./modules/form-geology-road-zhuhu";
import FormGeologyShuiHui from "./modules/form-geology-shuihui";
import ItemMixins from "./modules/item.mixins";
import Enums from '@/utils/enums'

export default {
  components: {
    FormGeologyBase, FormGeologyBengTa, FormGeologyHuaPo, FormGeologyNiShiLiu, FormGeologyChenJiang, FormGeologyRoadTf
    , FormGeologyRoadWf
    , FormGeologyRoadHd
    , FormGeologyRoadSd
    , FormGeologyRoadPs
    , FormGeologyRoadTc
    , FormGeologyRoadBd
    , FormGeologyRoadZd
    , FormGeologyRoadJz
    , FormGeologyRoadZh
    , FormGeologyRoadPs
    , FormGeologyShuiHui
  },
  mixins: [ItemMixins,Enums],
  data() {
    return {
      activeName: '',
      roadEffectActiveName: '',
      collapseActiveName: '',
      stepActive: 0,
      EnumMeasuresList: [],
      EnumDamageTypeList: [],
      EnumRoadEffectTypeList: [],
      baseCurrentRow: {
        picList: [],
        damageTypeList: [],
        roadEffectTypeList: [],
        measuresTypeList: [],
        damage: {
          collapse: {item: {}},
          landslide: {item: {}},
          debrisFlow: {item: {}},
          settlement: {item: {}},
          water: {item: {}},
          remark: '',
        },
        roadEffect: {
          fillSubgrade: {},
          cutSlope: {},
          bridgeCulvert: {},
          tunnel: {},
          drainage: {},
          field: {},
          traffic: {},
          place: {},
          building: {},
          household: {},
          remark: '',
        }
      },
      currentRow: {
        damageTypeList: [],
        picList: [],
        measuresTypeList: [],
        roadEffectTypeList: [],
        damage: {remark: ''},
        roadEffect: {remark: ''},
      },
    }
  },
  watch: {
    jumpCurrentRow(val) {
      this.currentRow = this.baseCurrentRow
      if (val) {
        this.currentRow = val
      }
    },
  },
  computed: {
    jumpCurrentRow() {
      return this.$route.params.currentRow
    },
  },
  methods: {
    lastStep() {
      //隐患等级为正常 跳过中间步骤\
      if (this.currentRow.dangerLevel === 0) {
        this.stepActive--
        this.stepActive--
      }
      this.stepActive--
    },
    // 表单提交
    validateForm() {
      this.submitData()
    },
    // 新增编辑提交数据
    async submitData() {
      // 根据ID判断使用新增还是编辑
      let action = this.currentRow.id ? updateGeologyInvestigation : addGeologyInvestigation
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.$nextTick(() => {
          this.$refs.formBase.$refs.form.clearValidate()
        })
        this.currentRow = JSON.parse(JSON.stringify(this.baseCurrentRow))
        this.stepActive = 0

      }
    },
    // 新增数据
    handleAdd() {
      this.$nextTick(() => {
        this.$refs.formBase.$refs.form.clearValidate()
      })
      this.currentRow = JSON.parse(JSON.stringify(this.baseCurrentRow))
      this.currentRow.userName = this.$store.state.userInfo.userName
      this.currentRow.unitName = this.$store.state.userInfo.unitName
      const {currentRow} = this.$route.params
      if (currentRow) {
        this.currentRow = currentRow
        this.collapseActiveName = this.currentRow.damageTypeList[0] + ''
        this.roadEffectActiveName = this.currentRow.roadEffectTypeList[0] + ''
      }
    },
    // 表单校验
    validatorForm(name) {
      if (name) {
        this.$refs[name]._validatorForm().then((res) => {
          if (this.currentRow.dangerLevel === 0) {
            this.stepActive++
            this.stepActive++
          }
        })
      }
      this.stepActive++
    },
    //根据所选的灾害类型，展示不同的填写表单
    showCollapseTab(val) {
      return this.currentRow.damageTypeList.indexOf(val) > -1
    },
    //根据所选的影响公路情况，展示不同的填写表单
    showRoadEffectTab(val) {
      return this.currentRow.roadEffectTypeList.indexOf(val) > -1
    },
    // 灾害类型
    changeCollapseItem() {
      this.collapseActiveName = this.currentRow.damageTypeList[this.currentRow.damageTypeList.length - 1] + ''
    },
    // 影响公路情况
    changeRoadEffectItem() {
      this.roadEffectActiveName = this.currentRow.roadEffectTypeList[this.currentRow.roadEffectTypeList.length - 1] + ''
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },
  }
  ,
  created() {
    this.getRoadList();
    this.queryDictList(['EnumDangerLevel', 'EnumCheckStatus', 'EnumInvestigateType', 'EnumDamageType', 'EnumRoadEffectType', 'EnumMeasures'],
      ['EnumDangerLevelList', 'EnumCheckStatusList', 'EnumInvestigateTypeList', 'EnumDamageTypeList', 'EnumRoadEffectTypeList', 'EnumMeasuresList']);
  }
  ,
  mounted() {
    // // 查询单位类型
  }
  ,
  activated() {
    this.handleAdd()
  }
}
</script>
<style lang="less">
  .page_monitor-add {
    width: 1200px;
    margin: 0 auto;

    .page-title {
      margin-bottom: 50px;
      padding: 28px;
      font-size: 30px;
      line-height: 18px;
      text-align: center;
      color: white;
      font-weight: 600;
      background-color: #1990FE;
      border-radius: 20px;
    }
  }

  .el-step.is-simple .el-step__title {
    font-size: 21px !important;
    line-height: 20px;
    font-weight: 600;
  }

  .measures-info {
    font-size: 15px;
    margin-left: 10px;
    line-height: 30px;
  }

  .detail-children {
    border-left: 2px;
    border-right: 2px;
    border-style: double;
    border-color: #e4e4e4;
    padding: 20px;

  }

  .detail-children-info {
    background-color: rgb(243 243 243);
    min-height: 220px;
    padding: 10px;
    border-radius: 20px
  }

  .s-white {
    color: #FFFFFF;
  }

  .father-box {
    margin-left: 20px;

    .el-checkbox-group {
      padding-left: 100px;
    }

    .el-checkbox__label {
      width: 160px;
      display: inline-block;
      padding-left: 10px;
      line-height: 30px;
      font-size: 20px;
      margin-top: 6px;
    }

    /deep/ .el-checkbox {
      width: 120px;
      line-height: 38px;
    }
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 20px;
  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }

  .el-steps--simple {
    margin-bottom: 20px;
  }

  .item-children {
    margin-top: 20px;

    /deep/ .el-form-item__content {
      margin-left: 0px !important;
    }

    .el-tabs__item {
      font-size: 20px;
    }

    /deep/ .el-checkbox__label {
      font-size: 13px;
      line-height: 35px;
    }

    /deep/ .el-checkbox {
      display: block;
    }

    /deep/ .el-tabs__item.is-active {
      background-color: #e0e0e0;
      font-size: 16px;
    }
  }

  .button-foot {
    margin-top: 10px;
    text-align: center;
    padding: 10px;
  }

  .evaluate {
    /deep/ .el-form-item__label {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
    }
  }

  .page_main {
    /deep/ .el-table__expand-icon {
      font-size: 15px !important;
    }
  }

  .children-tabs {
    .el-tabs__item {
      font-size: 15px !important;
      font-weight: 600;
    }

    .el-tabs__item:hover {
      cursor: pointer;
    }

    .el-tabs__item.is-active {
      color: #fff;
      background-color: #1990FE;
    }
  }

  .expand-view {

    .damage-info {
      font-size: 15px;
      margin-left: 10px;
      line-height: 30px;
    }

    .el-card__body {
      padding: 20px;
    }

    .el-tabs__item {
      font-size: 20px;
      font-weight: 600;
    }

    .info-title {
      font-size: 18px;
      color: #1990FE;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .info {
      font-size: 15px;
      margin-left: 20px;
      color: #8c939d;
    }

    .info2 {
      border-radius: 5px;
      padding: 5px 10px;
      font-size: 15px;
      margin-left: 20px;
      color: #fff;
    }
  }

  .page_main {

    /deep/ .el-table__expanded-cell {
      background-color: #e4e4e4 !important;
    }
  }

</style>
